<template>
  <div class="Content">
    <h1>{{title}}</h1>
        <div v-for="(item,index) in arr4" :key="index">
      <div class="caidancontent">
        <!-- <img src="item.src" alt=""> -->
        <img :src="item.img" class="liuxingimg">
        <div class="liuxingxingxi">
           <span class="huanying leibie">{{ item.title }}
            <span class="buzhou">步骤图</span>
            </span><br>
            <!-- 菜谱 -->
          <span class="huanying caipu">{{ item.yongliao }}</span><br>
          <!-- //几人访问  推荐时间 -->
          <span class="huanying creater">{{ item.pushtime }}头条推荐</span><br>
          <!-- 制作用户名 -->
          <span class="huanying shoucang">{{ item. username }}</span>
        </div>
      </div>
    </div>
    <div class="page">
    <a href="#">
      <el-pagination background @current-change = 'changepage' layout="prev, pager, next" :total="arr22.length">
      </el-pagination></a></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title:'往期头条',
      arr4:[],
      arr22:[],
      page:{yema:1},
    };
  },
  async mounted() {
    
  this.$axios("/ly/allcaidan").then((res)=>{
       res.data.map((el) => {
        this.arr22.push(el);
      });
    })
    this.$axios("/ly/wangqitop",{params:{page:this.page.yema}}).then((res) => {
      res.data.map((el) => {
        this.arr4.push(el);
      });
    });

  },
   methods: {
    changepage(val){
      this.page.yema = val;
      this.arr4 = [];
      //回调网络请求
      this.$axios("/ly/wangqitop",{params:{page:this.page.yema}}).then((res) => {
      res.data.map((el) => {
        this.arr4.push(el);
      });
    });
    }
  },
  
};
</script>

<style scoped>

.Content{
  height: 2000px;
  position: relative;
}
.caidancontent {
  margin: 40px auto;
  height: 140px;
  width: 500px;
  /* border: 1px solid rgb(216, 216, 216); */
  display: flex;
}
.liuxingimg {
  display: inline-block;
  height: 140px;
  width: 215px;
  background-color: blanchedalmond;
}
.liuxingxingxi{
    margin-top: -10px;
    width: 400px;
}
.liuxingxingxi .huanying{
    margin-left: 20px;
    height: 30px;
    display: inline-block;

}
.leibie {
  font-size: 20px;
  font-weight: 800;
    margin-top: 15px;

}
.caipu {
  padding-bottom: 6px;
  color: rgb(143, 163, 123);
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.creater{
  line-height: 30px;
}
.shoucang,.creater{
  font-size: 13px;
  color: rgb(179, 174, 174);
}

.buzhou{
  display: inline-block;
  color: rgb(167, 164, 161);
  height: 20px;
  /* width: 50px; */
  font-size: 10px;
  text-align: center;
  line-height: 20px;
  background-color: cornsilk;
  margin-left: 5px;
}

.shoucang:hover{
  color: rgb(151, 8, 8);
}
.leibie:hover{
  color: rgb(151, 8, 8);
}
.liuxingimg:hover{
  opacity: 0.8;
}


.page{
  height: 50px;
  width: 200px;
  position: absolute;
  bottom: 20px;
  left: 150px;
}
</style>